<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myApp/style.css' %}">
<link href="{% static 'myApp/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'myApp/jquery-3.5.1/jquery-3.5.1.js' %}" ></script>
    <script src="{% static 'myApp/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
<body class="row">
{#<div>#}
{#    <form action="{% url 'myApp:index' %}" method="post">#}
{#        {% csrf_token %}#}
{#        {% if message  %}<p><strong>{{ message }}</strong></p>{% endif %}#}
{#        <label>账号:<input type="text" name="uid" ></label><br>#}
{#        <label>密码:<input type="password" name="password"></label><br>#}
{#        <input type="submit" value="登录">#}
{##}
{#    </form>#}
{#</div>#}

<div class="container">

        <div class="col-md-4 col-md-offset-4 form">
          <form class='form-login' action="{% url 'myApp:index' %}" method="post">
              {% csrf_token %}
              <h2 class="text-center">欢迎登录</h2>
              <div class="form-group">
                  {% if message  %}<p style="color: red"><strong>{{ message }}</strong></p>{% endif %}
                <label for="id_username">账号：</label>
                <input type="text" name='uid' class="form-control" id="id_username" placeholder="Username" autofocus required>
              </div>
              <div class="form-group">
                <label for="id_password">密码：</label>
                <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>
              </div>
              <button type="reset" class="btn btn-default pull-left">重置</button>
              <button type="submit" class="btn btn-primary pull-right">登录</button>
          </form>
        </div>
    </div>

</body>

<style>
body {
  background-color: #ffffff;
}
.form{
    background: rgba(243, 243, 243, 0.9);
}
.form-login {
  max-width: 330px;
  padding: 30px;
  margin: 50px auto;


}
.form-login .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-login .form-control:focus {
  z-index: 2;
}
.form-login input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-login input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>
</html>